<template>
  <section id="default">
    <el-row class='wrap' id='user-wrap'>
        <div class='avatar-img'>
            <img :src="headimg" height="80%" width="80%" alt="">
        </div>
        <p class='invatation'>
            <span>邀请码 </span>
            <span> {{code}}</span>
        </p>
        <div class='qr' v-if='phone'>
            <img :src="qr" alt="二维码" width="100%" height="100%">
        </div>
        <div v-else class='no-phone'>
            绑定手机号赚取更多优惠噢
        </div>
        <p @click='getWeMessage' class='message'>留言反馈</p>
    </el-row>
    <el-row class='footer'>
        <el-col :span='8' class='user-home'>
            <div @click="footerEv('index',$event)">
                <p class='p1'></p>
                <p class='p2'>商家列表</p>
            </div>
        </el-col>
        <el-col :span='8'  class='user-order'>
            <div @click="footerEv('order',$event)">
                 <p class='p1'></p>
                 <p class='p2'>订单</p>
            </div>
           
        </el-col>
        <el-col :span='8'  class='user-oil'>
            <div @click="footerEv('oil',$event)">
                 <p class='p1'></p>
                 <p class='p2'>油卡</p>
            </div>
           
        </el-col>
    </el-row>
  </section>
</template>
<script>
import {HREF,URL_USER_QR,_layer} from '@/comm.js';
export default {
  data(){
    return ({
      qr:'',
      code:'',
      headimg:'',
      phone:''
    });
  },
  created(){
    let This=this;
    $.post(URL_USER_QR,function(data){
      console.log('用户数据');
      console.log(data);
      if(data.retult){
        This.code=data.data.code;
        This.qr=data.data.qrcode;
        This.headimg=data.data.headimg;
        This.phone=data.data.phone;
      }else{
        _layer('服务器开小差了');
      }
    });
  },
  methods:{
    footerEv(type,ev){
        console.log('进去')
       $('.active-wrap .active').removeClass('active');
       $(ev.target).addClass('active');
       switch(type){
         case 'index':
           window.location.href=HREF+'/mdlist.html';
           console.log('跳转到商城页面');
           break ;
         case 'order':
           window.location.href=HREF+'/my-order.html';
           console.log('跳转到用户订单页面');
           break ;
         case 'oil':
           window.location.href=HREF+'/user-show-oilList.html';
           console.log('跳转到用户油卡页面');
           break ;
         case 'seller': 
           window.location.href=HREF+'/seller-info.html';
           console.log('跳转到商户页面');
           break ;
       }
     },
     getWeMessage(){
         window.location.href=HREF+'/leaving-message.html';
     }
  }
}
</script>
<style scoped>
   .wrap{
      position:relative; 
      width:90%;
      height:460px;
      margin:80px auto;
      background: url('../static/img/bg-user.png') no-repeat;
      background-size: 100% 100%;
   }
   .wrap .avatar-img{
      width: 90px;
      height:90px;
      margin: -26px auto;
      border-radius: 50%;
      background:white;
   }
   .wrap .avatar-img img{
      display: inline-block;
      width: 80%;
      height: 80%;
      border-radius: 50%;
      margin:10%;
   }
   .invatation{
      margin-top: 50px;
      text-align: center;
   }
   .invatation span{
      font-size: 16px;
   }
   .invatation span:first-of-type{
      color: #c5b9b9;
   }
   .invatation span:last-of-type{
      color:black;
   }
   .qr{
      width: 200px;
      height: 200px;
      margin: 18px auto;
   }
   .no-phone{
      padding-top: 30px;
      text-align: center;
      color:red;
      font-size:17px;
   }
   .message{
      position: absolute;
      bottom: 7%;
      left: 10%;
      width: 80%;
      height: 40px;
      border: 1px solid #d9d9d9;
      border-radius: 3px;
      font-size: 15px;
      line-height: 40px;
      text-align: center;
   }
   .footer{
       position:fixed;
       bottom: 0;
       width: 100%;
       height: 46px;
       padding:2px;
       background: #f7f7f7;
   }
   .footer .p1{
       height:28px;
   }
   .footer .p2{
       height:18px;
       font-size: 12px;
       line-height: 15px;
       text-align: center;
   }
   .user-home .p1{
       background: url('../static/img/user-home.png') no-repeat;
   }
   .user-order .p1{
       background: url('../static/img/user-order.png') no-repeat;
   }
   .user-oil .p1{
       background: url('../static/img/user-oil.png') no-repeat;
   }
   .user-home .p1,
   .user-order .p1,
   .user-oil .p1{
       background-size: auto 70%;
       background-position:center center;  
   }
</style>
